<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>小游戏</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      position: relative;
      height: 100vh;
      overflow: hidden;
    }
    .top-right-buttons {
      position: fixed;
      top: 10px;
      right: 10px;
      display: flex;
      flex-direction: column;
      gap: 15px;
      z-index: 20;
    }
    .btn {
      display: flex;
      align-items: center;
      background: #eee;
      border-radius: 5px;
      padding: 5px 10px;
      cursor: pointer;
      user-select: none;
      font-size: 16px;
    }
    .btn-icon {
      font-size: 20px;
      margin-right: 6px;
    }
    .btn-key {
      font-weight: bold;
      color: #555;
    }
    .btn:hover {
      background: #ddd;
    }
    .play {
      margin-top: 300px;
      position: relative;
      height: 200px;
    }

    /* 左侧卡通女孩 */
    #cartoon-girl {
      position: relative;
      float: left;
      border: 2px solid red;
      width: 100px;
      height: auto;
      margin-left: 20px;
    }
    /* HP Bar Styles */
    #hp-container {
      position: fixed;
      bottom: 20px;
      left: 20px;
      width: 120px;
      height: 20px;
      background-color: #ddd;
      border: 1px solid #999;
      border-radius: 5px;
      z-index: 30;
    }

    #hp-bar {
      height: 100%;
      width: 100%;
      background-color: red;
      border-radius: 5px;
      transition: width 0.3s ease;
    }

    /* 右侧小怪兽 */
    #monster {
      position: relative;
      float: right;
      width: 100px;
      height: auto;
      margin-right: 20px;
    }

    #monster-hp-container {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 120px;
      height: 20px;
      background-color: #ddd;
      border: 1px solid #999;
      border-radius: 5px;
      z-index: 30;
    }

    #monster-hp-bar {
      height: 100%;
      width: 100%;
      background-color: green;
      border-radius: 5px;
      transition: width 0.3s ease;
    }

    /* 火球，初始隐藏，绝对定位 */
    #fireball {
      position: absolute;
      top: 60px;
      right: 120px;
      width: 50px;
      height: auto;
      z-index: 10;
      display: none;
      border: 2px solid red;
    }

    /* 火球飞行动画 */
    @keyframes fireball-move {
      0% {
        right: 120px;
        top: 35px;
        opacity: 1;
      }
      100% {
        right: calc(100% - 120px);
        top: 35px;
        opacity: 1;
      }
    }

    #shield {
      position: absolute;
      top: -30px;
      left: -10px;
      width: 160px;
      height: 160px;
      background-color: rgba(0, 200, 255, 0.3);
      border-radius: 50%;
      border: 2px solid rgba(0, 200, 255, 0.6);
      display: none;
      z-index: 9;
      pointer-events: none;
    }

    #shield2 {
      position: absolute;
      top: -40px;
      left: -20px;
      width: 180px;
      height: 180px;
      background: radial-gradient(circle at center, rgba(150, 0, 255, 0.3), rgba(150, 0, 255, 0.1));
      border: 2px solid rgba(150, 0, 255, 0.5);
      border-radius: 50%;
      display: none;
      z-index: 11;
      pointer-events: none;
    }

    #shield3 {
      position: absolute;
      top: -30px;
      left: -30px;
      width: 180px;
      height: 180px;
      background-color: rgba(255, 255, 0, 0.4);
      border: 2px solid rgba(255, 255, 0, 0.7);
      border-radius: 50%;
      display: none;
      z-index: 12;
      pointer-events: none;
    }

    @keyframes shake {
      0% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      50% { transform: translateX(5px); }
      75% { transform: translateX(-5px); }
      100% { transform: translateX(0); }
    }

  </style>
</head>
<body>

<div class="top-right-buttons">
  <div class="btn" data-key="1" tabindex="0">
    <span class="btn-icon">○</span>
    <span class="btn-key">1</span>
  </div>
  <div class="btn" data-key="2" tabindex="0">
    <span class="btn-icon">○</span>
    <span class="btn-key">2</span>
  </div>
  <div class="btn" data-key="3" tabindex="0">
    <span class="btn-icon">○</span>
    <span class="btn-key">3</span>
  </div>
</div>

<!-- 左右角色图片 -->
<div class="play">
  <img id="cartoon-girl" src="./卡通女孩.png" alt="卡通女孩" />
  <img id="monster" src="./小怪兽.png" alt="小怪兽" />
  <div id="monster-hp-container">
    <div id="monster-hp-bar"></div>
  </div>
  <!-- 火球图片 -->
  <img id="fireball" src="./hot.png" alt="火球" />
  <div id="shield"></div>
  <div id="shield2"></div>
</div>

<!-- HP Bar at bottom left -->
<div id="hp-container">
  <div id="hp-bar"></div>
</div>

<script>
  console.log('脚本加载完成');

  let gamePaused = false;

  // 点击按钮触发事件
  document.querySelectorAll('.btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const key = btn.dataset.key;
      // alert('按钮 ' + key + ' 被点击了');
      if (key === '2') {
        activateShield2();
      }
      if (key === '3') {
        activateShield3();
      }
    });
  });

  const girl = document.getElementById('cartoon-girl');
  const shield = document.getElementById('shield');
  const hpBar = document.getElementById('hp-bar');

  const shield2 = document.createElement('div');
  shield2.id = 'shield2';
  girl.parentElement.appendChild(shield2);

  const shield3 = document.createElement('div');
  shield3.id = 'shield3';
  girl.parentElement.appendChild(shield3);

  const monster = document.getElementById('monster');
  const monsterHpBar = document.getElementById('monster-hp-bar');
  let monsterHp = 100;

  let hp = 100;
  let fireballCount = 0;

  let isShield3Active = false;
  let monsterDisabled = false;

  let shield1Hits = 0;
  let shield2Hits = 0;
  let shield3Hits = 0;
  let shield1Timeout, shield2Timeout, shield3Timeout;

  function updateHpBar() {
    hpBar.style.width = hp + '%';
    if (hp === 0 && !document.getElementById('death-overlay')) {
      pauseGame();
      const overlay = document.createElement('div');
      overlay.id = 'death-overlay';
      overlay.style.position = 'fixed';
      overlay.style.top = '0';
      overlay.style.left = '0';
      overlay.style.width = '100%';
      overlay.style.height = '100%';
      overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
      overlay.style.color = 'white';
      overlay.style.display = 'flex';
      overlay.style.flexDirection = 'column';
      overlay.style.justifyContent = 'center';
      overlay.style.alignItems = 'center';
      overlay.style.zIndex = '1000';

      const message = document.createElement('div');
      message.textContent = '你已死亡';
      message.style.fontSize = '32px';
      message.style.marginBottom = '20px';

      const button = document.createElement('button');
      button.textContent = '再来一次';
      button.style.padding = '10px 20px';
      button.style.fontSize = '18px';
      button.style.cursor = 'pointer';

      button.addEventListener('click', () => {
        location.reload();
      });

      overlay.appendChild(message);
      overlay.appendChild(button);
      document.body.appendChild(overlay);
    }
  }

  function updateMonsterHpBar() {
    monsterHpBar.style.width = monsterHp + '%';
    if (monsterHp === 0 && !document.getElementById('win-overlay')) {
      pauseGame();
      const overlay = document.createElement('div');
      overlay.id = 'win-overlay';
      overlay.style.position = 'fixed';
      overlay.style.top = '0';
      overlay.style.left = '0';
      overlay.style.width = '100%';
      overlay.style.height = '100%';
      overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
      overlay.style.color = 'white';
      overlay.style.display = 'flex';
      overlay.style.flexDirection = 'column';
      overlay.style.justifyContent = 'center';
      overlay.style.alignItems = 'center';
      overlay.style.zIndex = '1000';

      const message = document.createElement('div');
      message.textContent = '你赢了！';
      message.style.fontSize = '32px';
      message.style.marginBottom = '20px';

      const button = document.createElement('button');
      button.textContent = '再来一次';
      button.style.padding = '10px 20px';
      button.style.fontSize = '18px';
      button.style.cursor = 'pointer';

      button.addEventListener('click', () => {
        location.reload();
      });

      overlay.appendChild(message);
      overlay.appendChild(button);
      document.body.appendChild(overlay);
    }
  }

  document.addEventListener('keydown', e => {
    if (e.key === '1') {
      activateShield1();
    }
    if (e.key === '2') {
      activateShield2();
    }
    if (e.key === '3') {
      activateShield3();
    }
  });

  function activateShield1() {
    shield.style.display = 'block';
    shield1Hits = 0;
    clearTimeout(shield1Timeout);
    shield1Timeout = setTimeout(() => {
      shield.style.display = 'none';
    }, 8000);
  }

  function activateShield2() {
    shield2.style.display = 'block';
    shield2Hits = 0;
    clearTimeout(shield2Timeout);
    shield2Timeout = setTimeout(() => {
      shield2.style.display = 'none';
    }, 4000);
  }

  function activateShield3() {
    isShield3Active = true;
    shield3.style.display = 'block';
    shield3Hits = 0;
    clearTimeout(shield3Timeout);
    shield3Timeout = setTimeout(() => {
      isShield3Active = false;
      shield3.style.display = 'none';
    }, 8000);
  }

  function createFireball() {
    if (hp <= 0) return;
    fireballCount++;
    console.log(`发射火球 ${fireballCount}`);

    const fireball = document.createElement('img');
    fireball.src = './hot.png';
    fireball.style.position = 'absolute';
    fireball.style.top = girl.offsetTop + 30 + 'px'; // 贴近女孩位置
    fireball.style.right = '120px';
    fireball.style.width = '50px';
    fireball.style.height = 'auto';
    fireball.style.zIndex = '10';

    fireball.onerror = () => console.warn('⚠️ 图片加载失败！');

    document.body.appendChild(fireball);

    const duration = 2000; // 飞行时长2秒
    const startTime = performance.now();

    function move() {
      const elapsed = performance.now() - startTime;
      if (elapsed > duration) {
        fireball.remove();
        scheduleNext();
        return;
      }

      const progress = elapsed / duration;
      // 从右边向左移动，right 从 120px 变成 window.innerWidth + 50px
      fireball.style.right = 120 + progress * (window.innerWidth + 50) + 'px';

      const fireballRect = fireball.getBoundingClientRect();
      const girlRect = girl.getBoundingClientRect();

      const isCollide = !(fireballRect.right < girlRect.left ||
              fireballRect.left > girlRect.right ||
              fireballRect.bottom < girlRect.top ||
              fireballRect.top > girlRect.bottom);

      if (isCollide) {
        if (shield2.style.display === 'block') {
          fireball.remove();
          reflectFireball();
          shield2Hits++;
          if (shield2Hits >= 2) {
            shield2.style.display = 'none';
            clearTimeout(shield2Timeout);
          }
          scheduleNext();
          return;
        }
        if (isShield3Active) {
          fireball.remove();
          disableMonster();
          shield3Hits++;
          if (shield3Hits >= 3) {
            shield3.style.display = 'none';
            isShield3Active = false;
            clearTimeout(shield3Timeout);
          }
          scheduleNext();
          return;
        }
        if (shield.style.display !== 'block') {
          hp = Math.max(0, hp - 20);
          updateHpBar();
        } else {
          shield1Hits++;
          if (shield1Hits >= 3) {
            shield.style.display = 'none';
            clearTimeout(shield1Timeout);
          }
        }
        fireball.remove();
        if (monsterDisabled) {
          fireball.remove();
          scheduleNext();
          return;
        }
        scheduleNext();
        return;
      }

      requestAnimationFrame(move);
    }

    move();
  }

  function reflectFireball() {
    const fb = document.createElement('img');
    fb.src = './hot.png';
    fb.style.position = 'absolute';
    fb.style.top = girl.offsetTop + 30 + 'px';
    fb.style.left = girl.offsetLeft + girl.offsetWidth + 10 + 'px';
    fb.style.width = '50px';
    fb.style.height = 'auto';
    fb.style.zIndex = '10';
    fb.style.transform = 'scaleX(-1)';
    document.body.appendChild(fb);

    const duration = 2000;
    const start = performance.now();

    function moveBack() {
      const elapsed = performance.now() - start;

      const fbRect = fb.getBoundingClientRect();
      const monsterRect = monster.getBoundingClientRect();
      const hitMonster = !(fbRect.right < monsterRect.left ||
              fbRect.left > monsterRect.right ||
              fbRect.bottom < monsterRect.top ||
              fbRect.top > monsterRect.bottom);
      if (hitMonster) {
        monsterHp = Math.max(0, monsterHp - 20);
        updateMonsterHpBar();
        fb.remove();
        return;
      }

      if (elapsed > duration) {
        fb.remove();
        return;
      }
      const progress = elapsed / duration;
      fb.style.left = girl.offsetLeft + girl.offsetWidth + 10 + progress * (window.innerWidth - 100) + 'px';
      requestAnimationFrame(moveBack);
    }

    moveBack();
  }

  // 只存在一个独立2秒震动效果的 disableMonster
  let monsterShakeTimeout = null;

  function disableMonster() {
    if (monsterShakeTimeout) return; // 已有震动效果，忽略

    monster.style.animation = 'shake 0.1s infinite';
    monsterDisabled = true;

    monsterShakeTimeout = setTimeout(() => {
      monster.style.animation = '';
      monsterDisabled = false;
      monsterShakeTimeout = null;
    }, 2000);
  }

  function scheduleNext() {
    if (gamePaused) return;
    const fireballCount = Math.floor(Math.random() * 3) + 1;
    for (let i = 0; i < fireballCount; i++) {
      setTimeout(() => {
        createFireball();
      }, i * 300); // 每个火球间隔 300ms，避免重叠
    }
    setTimeout(scheduleNext, 700); // 每轮 0.7 秒调度一次
  }

  function pauseGame() {
    gamePaused = true;
    // 停止所有 fireball 动画
    document.querySelectorAll('img[src="./hot.png"]').forEach(fb => fb.remove());
  }

  updateHpBar();
  updateMonsterHpBar();
  scheduleNext();
</script>
</body>
</html>